<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*
            首先：这题我们要用栈。如果进来一个更高的，那么面积肯定更大，进来小的才比较.因为长度变长，不一定面积变小。
            因此维持一个单调递增栈,栈里存放的是下标，同时heights=[0,...heights,0]

            0 5 6 4 0。
            首先0，5，6入栈，遇到了4。那么我们要循环出栈，首先计算的是以6为高度(不然某一个特别高呢),宽度为当前下标i-剩余栈顶元素-1
            6*(3-1-1)  4的下标-5的下标-1

            然后又遇到了5，让5出栈，宽度为当前下标3-栈顶元素下标0-1，即以5，6构成的面积为10
            再遇到了0，4入栈，最后遇到了保证出栈的0，4出栈，计算高度为4，宽度为当前下标4-栈顶元素0-1

            */
        var largestRectangleArea = function (heights) {
          const stack = []
          heights = [0, ...heights, 0]
          let maxArea = 0
          for (let i = 0; i < heights.length; i++) {
            while (heights[i] < heights[stack[stack.length - 1]]) {
              let topIndex = stack.pop()
              //i-stack[stack.length-1]即长度
              maxArea = Math.max(maxArea, heights[topIndex] * (i - stack[stack.length - 1] - 1))
            }
            stack.push(i)
          }
          return maxArea
        }
    </script>
  </body>
</html>
